<template>
	<view class="content" style="padding-top: 0upx;">


		<view class="index_box">
			<view class="title">首页</view>
			<view class="search_box demo">
				<image :src="appLogo" mode="widthFix" class="search_title"></image>
				<view class="input_box ali">
					<image src="../../static/index/search.png" mode="widthFix" class="search_img"></image>
					<input type="text" placeholder="输入你想要搜索的商品" placeholder-class="input_title" />
				</view>
			</view>

			<swiper class="screen-swiper" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
				duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index" @tap="navigateTo(item.url)">
					<image :src="item.image" mode="aspectFill" class="screen_img"></image>
				</swiper-item>
			</swiper>

			<view class="dis memu_box" style="width: 100%;">
				<view class="memu_item" v-for="(item,index) in navigate" :key="index" @tap="navigateTo(item.url)">
					<image :src="item.image" mode="aspectFill" class="memu_img"></image>
					<view class="memu_title">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="nav_box_box" :class="isFixedTop?'fixedTop':''" id="box">
				<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
					<view class="dis" style="width: 100%;">
						<view :class="nav_index == index?'nav_item nav_choose':'nav_item'"
							v-for="(item,index) in category" :key="index" @click="chooseNav(index)">
							<view class="">
								{{item.name}}
							</view>
							<view class="bottom_box" v-if="nav_index == index"></view>
							<view class="bottom_box_null" v-else></view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="list_box">
				<view class="list_item" v-for="(item,index) in list" :key="index" @tap="goodsDetail(item.id)">
					<image :src="item.image_url" mode="aspectFill" class="list_img"></image>
					<view class="list_name">
						{{item.name}}
					</view>
					<view class="demo gray_title">
						<view class="list_old_price">
							￥{{item.mktprice}}
						</view>
						库存{{item.stock > 99 ? '99+' : item.stock}}件
					</view>
					<view class="red_price">￥{{item.price}}</view>
				</view>
			</view>
		</view>
		<jh-tabbar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'more',

				banner: [],
				navigate: [],
				category: [{id:0}],

				list: [],
				page: 1,
				limit: 10,

				page: 1,
				limit: 10,

				isFixedTop: false, //是否到顶
				Topdistance: '',

				img_list: [{
					image: '../../static/index/img.png'
				}, {
					image: '../../static/index/img.png'
				}],

				nav_index: 0,
				
			};
		},
		onLoad() {
			this.getInfo();
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
			setTimeout(() => {
				this.GetTop()
			}, 1000)

			
		},
		onShow() {
			this.getList() //获取商品列表
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.loadStatus = 'more'
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 下拉获取新商品
		onReachBottom() {
			this.page += 1
			this.getList()
		},
		computed: {

			appLogo() {
				return this.$store.state.config.app_logo;
			}
		},
		//监测页面滑动
		onPageScroll(e) {
			if (e.scrollTop > this.Topdistance) {
				this.isFixedTop = true
				
			} else {
				this.isFixedTop = false
			}
		},
		methods: {
			navigateTo(url){
				if(url)
				this.$common.navigateTo(url);
			},
			goodsDetail: function(id) {
				let url = '/pages/goods/index/index?id=' + id;
				this.$common.navigateTo(url);
			},
			
			getInfo() {
				this.$api.homeConfig(res => {
					this.banner = res.data.banner;
					this.navigate = res.data.navigate;
					this.category = res.data.category;
				})
			},
			getList() {
				
				if(this.loadStatus == 'noMore')
					return false;
				
				let where = '';
				if(this.nav_index == 0)
					where = `{\"hot\":\"0\"}`
				else
					where = `{\"cat_id\":\"`+this.category[this.nav_index].id+`\"}`
				let data = {
					page: this.page,
					limit: 10,
					where:where
				}
				this.loadStatus = 'loading'
				this.$api.goodsList(data, res => {
					if (res.status) {
						if (this.page >= res.data.total_page) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page++
						}
						this.list = [...this.list, ...res.data.list]
					} else {
						this.$common.errorToShow(res.msg)
					}
				});

			},
			GetTop() {
				// 获取元素距离顶部的距离
				var _this = this
				uni.getSystemInfo({
					success: (resu) => {
						const query = uni.createSelectorQuery()
						query.select('#box').boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(function(res) {
							
							_this.Topdistance = res[0].top - 50
						})
					},
					fail: (res) => {}
				})
			},
			chooseNav(val) {
				this.nav_index = val;
				this.page = 1;
				this.list = []
				this.loadStatus = 'more'
				this.getList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.memu_box {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;
	}

	.list_old_price {
		text-decoration-line: line-through;
	}

	.gray_title {
		font-size: 20rpx;
		color: #999999;
		line-height: 34rpx;
		margin-top: 15rpx;
		margin-bottom: 23rpx;
	}

	.list_name {
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.list_img {
		width: 302rpx;
		height: 302rpx;
		border-radius: 10rpx;
		margin-bottom: 11rpx;
	}

	.list_item {
		width: 338rpx;
		background: #232429;
		box-shadow: 0rpx 5rpx 40rpx 1rpx rgba(255, 255, 255, 0.45);
		border-radius: 10rpx;
		padding: 17rpx 18rpx 43rpx;
		margin-bottom: 20rpx;
	}

	.list_box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 30rpx 110rpx;
	}

	/* .............................................. */

	.screen_img {
		width: 690rpx;
		height: 380rpx;
		border-radius: 20rpx;
	}

	.screen-swiper {
		width: 690rpx;
		height: 380rpx;
		border-radius: 12rpx;
		margin: 30rpx;
	}

	.scroll-Y {
		height: 1334rpx;
	}

	.red_price {
		font-weight: bold;
		font-size: 36rpx;
		color: #FF363A;
		line-height: 35rpx;
	}

	.num {
		font-size: 20rpx;
		color: #999999;
		line-height: 34rpx;
	}

	.good_price {
		font-weight: 500;
		font-size: 20rpx;
		color: #999999;
		line-height: 0rpx;
		text-align: left;
		font-style: normal;
		text-decoration-line: line-through;
		text-transform: none;
	}

	.good_name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.good_info_box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 420rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 34rpx;
	}

	.good_img {
		width: 190rpx;
		height: 190rpx;
		margin-right: 36rpx;
	}

	.good_box {
		width: 690rpx;
		background: #232429;
		box-shadow: 0rpx 5rpx 40rpx 1rpx rgba(255, 255, 255, 0.45);
		border-radius: 10rpx;
		padding: 20rpx;
		margin: 30rpx;
	}

	/* ........................................ */

	.bottom_box {
		width: 64rpx;
		height: 10rpx;
		margin-top: 5rpx;
		background-color: #FFB75C;
	}

	.bottom_box_null {
		width: 64rpx;
		height: 10rpx;
		margin-top: 5rpx;
		background-color: transparent;
	}

	.nav_item {
		padding: 0 30rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
	}

	.nav_choose {
		color: #fff;
		font-weight: bold;
	}

	.nav_box_box {
		width: 750rpx;
		padding-right: 30rpx;
		display: flex;
		margin-bottom: 56rpx;
	}

	/* ........................................... */

	.memu_title {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 9rpx;
		text-align: center;
	}

	.memu_img {
		width: 100rpx;
		height: 100rpx;
	}

	.memu_item {
		margin: 20rpx 40rpx;
	}

	.memu_top {
		width: 750rpx;
		padding-right: 40rpx;
		display: flex;
	}

	.split_img {
		width: 690rpx;
		height: 300rpx;
		border-radius: 20rpx;
		margin: 0 30rpx;
	}

	/* ....................................... */

	.input_title {
		font-size: 28rpx;
		color: #000000;
	}

	.search_img {
		width: 30rpx;
		margin-right: 6rpx;
	}

	.input_box {
		width: 509rpx;
		height: 61rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding-left: 20rpx;
	}

	.search_title {
		width: 142rpx;
		margin-right: 19rpx;
	}

	.search_box {
		padding-left: 50rpx;
		padding-right: 30rpx;
	}

	.title {
		width: 750rpx;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 113rpx;
		margin-bottom: 48rpx;
	}

	.index_box {
		position: absolute;
	}

	.bgc_img {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		background: $moren-color;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.fixedTop {
		position: fixed;
		/* width:100%; */
		top: 0rpx;
		left: 0;
		z-index: 999;
		background: $moren-color;
		padding-top: 100rpx;
	}
</style>